<template>
  <ele-page>
    <!-- 搜索表单 -->
    <search @search="reload" ref="searchRef" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        stripe
        border
        :toolbar="false"
      >
        <template #appeal="{ row }">
          <span v-if="row.appeal === 0">未申诉</span>
          <el-tag
            v-if="row.appeal === 1"
            class="pointer"
            type="primary"
            size="small"
            @click="showDetail(row)"
          >
            处理申诉
          </el-tag>
          <el-tag
            v-if="row.appeal === 2"
            class="pointer"
            type="success"
            size="small"
            @click="showDetail(row)"
          >
            已处理
          </el-tag>
        </template>
        <template #action="{ row }">
          <el-link
            v-if="row.status === 1"
            type="danger"
            :underline="false"
            @click="cancelPunish(row)"
          >
            撤销处罚
          </el-link>
          <el-link
            v-if="row.status === 2"
            type="success"
            :underline="false"
            @click="cancelPunish(row)"
          >
            已撤销【点击查看详情】
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 签到表 -->
    <cancel v-model="showCancel" :data="current" @done="reload" />
  </ele-page>
</template>

<script setup>
  import { ref } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { ElMessageBox } from 'element-plus/es';
  import Search from './components/search.vue';
  import Cancel from './components/cancel.vue';

  import {
    pagePunish,
    updateJobDisplay,
    cancelJob,
    delJob,
    sendJobMpMessage
  } from '@/api/company';

  /** 表格实例 */
  const tableRef = ref(null);

  /** 当前编辑的数据 */
  const current = ref(null);

  /** 显示撤销处罚窗口 */
  const showCancel = ref(false);

  /** 表格列配置 */
  const columns = ref([
    {
      label: '城市',
      prop: 'region_name',
      width: 100,
      align: 'center'
    },
    {
      label: '姓名',
      prop: 'realname',
      width: 100
    },
    {
      label: '工作编号',
      prop: 'code',
      width: 110,
      align: 'center'
    },
    {
      label: '原因',
      prop: 'reason'
    },
    {
      label: '处罚内容',
      prop: 'content'
    },
    {
      label: '操作人',
      prop: 'admin_username',
      width: 100,
      align: 'center'
    },
    {
      label: '处罚时间',
      prop: 'create_time',
      width: 160,
      align: 'center'
    },
    {
      label: '申诉',
      prop: 'appeal',
      width: 100,
      align: 'center',
      slot: 'appeal'
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 110,
      align: 'center',
      slot: 'action'
    }
  ]);

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pagePunish({
      ...where,
      ...orders,
      page,
      limit
    });
  };

  const searchRef = ref(null);

  /** 搜索 */
  const reload = (where) => {
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 撤销处罚 */
  const cancelPunish = (row) => {
    current.value = row ?? null;
    showCancel.value = true;
  };

  /** 撤销处罚 */
  const handleDelete = (row) => {
    const rows = row == null ? selections.value : [row];
    if (!rows.length) {
      EleMessage.error('请至少选择一条数据');
      return;
    }
    ElMessageBox.confirm(
      '确定要删除“' + rows.map((d) => d.title).join(', ') + '”的工作吗?',
      '系统提示',
      { type: 'warning', draggable: true }
    )
      .then(() => {
        const loading = EleMessage.loading('请求中..');
        const id = row.id;
        delJob({ id })
          .then(() => {
            loading.close();
            EleMessage.success('操作成功');
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };
</script>

<script>
  export default {
    name: 'JobList'
  };
</script>
